<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入mapbox依赖 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、实例化地图 */
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdiZW5jaGFvIiwiYSI6ImNsODU3aGRiODA0Y2UzcHBzZmFlcmdqZ2sifQ.8k59W_pB_Riwe6o-MneRlA'
        const map = new mapboxgl.Map({
            container: "map",
            /* style-layers */
            style: "mapbox://styles/mapbox/streets-v12",
            center: [114.30, 30.50]
        })
        let city = 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson'
        let world = 'https://gw.alipayobjects.com/os/bmw-prod/2960e1fc-b543-480f-a65e-d14c229dd777.json'
        map.on("style.load", () => {
            map.addSource("world-data", {
                type: "geojson",
                data: world
            })
            map.addLayer({
                id: "world-layer",
                source: "world-data",
                type: "line",
                paint: {
                    // 'line-color': "#41fc9d"
                }
            })

            map.addLayer({
                id: "city-layer",
                source: {
                    type: "geojson",
                    data: city
                },
                type: "fill",
                paint:{
                    'fill-color':"#ff2d51"
                }
            })
        })
    </script>
</body>

</html>